/**
* @Description: 订货分类
* @author  tangbin
* @date 2023/3/10
*/

<template>
 <div class="app-containers">
   <query-table-render
       ref="queryTable"
       :query-model="queryModel"
       :table-request="requestTableData"
       :table-column="tableColumns"
       :title-render="titleRender"
       :toolbar-render="toolbarRnd"
       :transform-query="transformQuery"
       @on-operator="onOperator"
   >
     <template v-slot:form>
       <el-form-item label="分类名称" prop="name">
         <el-input v-model="queryModel.name" placeholder="请输入" clearable @keyup.enter.native="searchListQuery"/>
       </el-form-item>
       <el-form-item label="分类编号" prop="code">
         <el-input v-model="queryModel.code" placeholder="请输入" clearable @keyup.enter.native="searchListQuery"/>
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
           <el-option
               v-for="item in dict.type.order_class_status"
               :key="item.value"
               :label="item.label"
               :value="item.value"/>
         </el-select>
       </el-form-item>
     </template>
   </query-table-render>


 </div>
</template>

<script>
import {checkPermi} from '@/utils/permission.js'
import QueryTableRender from "@/components/QueryTableRender";
import {orderGoods} from '@/api/basic/orderGoodsClas.js'
import dayjs from "dayjs";
export default {
 name: 'OrderGoodsClassify',
 dicts: ['order_class_status'],
 // order_class_status
 components: {QueryTableRender},
 data() {
   return {
     disabled: false,
     title: '', // 弹窗标题
     open: false, // 是否显示弹窗
     isAdd: true, // 是否新增
    //  tmpOptions: [{label: '启用', value: 1}, {label: '禁用', value: 0}],
     queryModel: {}, // 查询参数
     tableColumns: [], // 表头字段
     form: {},
     rules: {}
   }
 },
 created() {
   this.setupRules();
   this.setupQueryModel();
   this.setupTableColumns();
 },
 watch: {
    $route(route) {
      if (route.name == 'OrderGoodsClassify') {
        this.onRefreshTable();
      }
    },
  },
 
 methods: {
   setupRules() {
     this.rules = {

     };
   },
   /**
    * 初始化查询条件参数
    */
    setupQueryModel() {
     const params = {
       name: undefined, // 分类名称
       code: undefined, // 分类编号
       status: undefined, // 状态
     };
     this.queryModel = {
       ...this.queryModel,
       ...params
     };
   },
   
   setupTableColumns() {
     this.tableColumns = [
       {
         label: '序号',
         width: '60',
         type: 'index',
         increment: true
       },
       {
         prop: 'code',
         label: '分类编号',
         align: 'left',
         minWidth: '180',
       },
       {
         prop: 'name',
         label: '分类名称',
         align: 'left',
         minWidth: '160',
       },
       {
         prop: 'status',
         label: '状态',
         minWidth: '120',
         align: 'left',
         render: (h, text) => {
          let show = "";
          // console.log('this.dict.type.order_class_status=', this.dict.type.order_class_status);
          this.dict.type.order_class_status.some((item) => {
            if (item.value === text) {
              show = item.label;
              return true;
            }
          });
          return show;
         }
       },
       {
         prop: 'remark',
         label: '备注',
         minWidth: '260',
         align: 'left',
         showOverflowTooltip: true
       },
       {
         label: '操作',
         width: '140',
         type: 'operator',
         align: "left",
         fixed: 'right',
         operators: this.operatorsFunc()
        //  operators: [
        //    {label: '修改', command: 'edit'},
        //    {label: '详情', command: 'detail'}
        //  ]
       },
       
     ];
   },

   statusFormat(row, column) {
      let show = "";
      this.tmpOptions.some((item) => {
        if (item.value === row.status) {
          show = item.label;
          return true;
        }
      });
      
      return show;
    },

   /**
    * 标题渲染
    * @param {*} h 
    */
   titleRender(h) {
     return <div>
       <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
       <span style="display: inline-block; color: #333333; font-size: 16px;">订货分类</span>
     </div>;
   },

   /**
    * 渲染功能列表
    * @param {*} h 
    */
   toolbarRnd(h) {
    let list = [];
    if (checkPermi(['basic-data:order-class:save'])) {
      list.push(<el-button type="primary" icon="el-icon-plus" size="small" vOn:click={() => this.addCategory()}>新增分类</el-button>);
    }
    return list;
   },

   operatorsFunc() {
    let list = [];
    if (checkPermi(['basic-data:order-class:edit'])) {
      list.push({label: '修改', command: 'edit'});
    }
    if (checkPermi(['basic-data:order-class:query'])) {
      list.push({label: '详情', command: 'detail'});
    }
    return list;
   },

   /**
    * 请求数据获取数据
    * @param {*} queryParams 
    */
   requestTableData(queryParams) {
    // console.log('订货分类=', queryParams);
    return orderGoods(queryParams).then(respData => {
      return {
        success: true,
        total: Number(respData.data.total),
        data: respData.data.records,
      }
    }
    );
   },

   /**
     * 刷新列表
     */
     onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },

    /**
     * 搜索列表查询
     */
     searchListQuery() {
      this.$refs['queryTable'].submitQuery();
    },

   /**
    * 修改参数格式
    * @param {*} queryData 
    */
   transformQuery(queryData) {
    //  console.log('queryData=', queryData);
     let transParams = {};
     for (let keyName in queryData) {
       if (queryData.hasOwnProperty(keyName)) {
         if (keyName === 'createTimeRange') {
           // if(queryData['createTimeRange'] && queryData['createTimeRange'].length){
           //   const [start, end] =  queryData[keyName]
           //   transParams['startTime'] = dayjs(start).startOf('day').format("YYYY-MM-DD HH:mm:ss")
           //   transParams['endTime'] = dayjs(end).endOf('day').format("YYYY-MM-DD HH:mm:ss")
           // }
         } else {
           transParams[keyName] = queryData[keyName]
         }
       }
     }
     return transParams;
   },

   /**
    * 重置
    */
   resetForms() {
     this.form = {
       categoryName: undefined, // 分类名称
       status: undefined, // 状态
       note: undefined, // 备注
     };
   },

   /**
    * 新增分类
    */
   addCategory() {
    this.$router.push({path: 'OrderGoodsClassifyAdd'});
   },

   /**
    * 修改数据
    * @param {*} record 
    */
  //  updateCategory(record) {
  //    this.resetForms();
  //    this.form = JSON.parse(JSON.stringify(record));
  //    this.title = '修改订货分类';
  //    this.open = true;
  //    this.isAdd = false;
  //  },

   /**
    * 操作页面
    * @param {*} command 
    * @param {*} record 
    */
   onOperator(command, record) {
    let query = {orderClassId:record.id};
    console.log('query=', query);
     if('edit' === command){
      this.$router.push({path:"OrderGoodsClassifyEdit", query: query});
     } else if ('detail' === command) {
      this.$router.push({path: 'OrderGoodsClassifyDetail', query: query});
     }
   },

    

 },
}
</script>

<style lang="scss" scoped>
</style>